<template>
  <view>
    <view class="profile-container">
      <!-- 用户信息 -->
      <view class="user-section">
        <u-avatar :src="userInfo.avatar" size="80" />
        <view class="user-info">
          <text class="user-name">{{ userInfo.name || '未登录' }}</text>
          <text class="user-role">{{ userInfo.role || '普通用户' }}</text>
        </view>
      </view>

      <!-- 常用操作 -->
      <view class="simple-card">
        <u-cell-group>
          <u-cell title="我的任务" icon="list" @click="goTo('/pages/task/task')" />
          <u-cell title="消息通知" icon="chat" @click="goTo('/pages/message/message')" />
          <u-cell title="扫码记录" icon="scan" @click="goTo('/pages/scan/scan')" />
        </u-cell-group>
      </view>

      <!-- 设置/退出登录 -->
      <view class="simple-card">
        <u-cell-group>
          <u-cell title="系统设置" icon="setting" @click="goTo('/pages/settings/settings')" />
          <u-cell title="退出登录" icon="lock" @click="logout" />
        </u-cell-group>
      </view>
    </view>
    <CustomTabbar />
  </view>
</template>

<script>
import CustomTabbar from '@/components/CustomTabbar.vue'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: { CustomTabbar },
  data() {
    return {
      userInfo: {
        avatar: '',
        name: '',
        role: ''
      }
    }
  },
  computed: {
    ...mapGetters('auth', ['isLoggedIn', 'username'])
  },
  onLoad() {
    this.loadUserInfo()
  },
  methods: {
    ...mapActions('auth', ['logout']),
    
    loadUserInfo() {
      if (this.isLoggedIn) {
        // 使用登录的用户信息
        this.userInfo = {
          avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
          name: this.username || '用户',
          role: '管理员'
        }
      } else {
        // 未登录状态
        this.userInfo = {
          avatar: '',
          name: '未登录',
          role: '请先登录'
        }
      }
    },
    
    goTo(url) {
      uni.navigateTo({ url })
    },
    
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 使用Vuex的logout方法
            this.logout()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}
.user-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 40rpx 0 24rpx 0;
  border-radius: 0;
  margin-bottom: 18rpx;
  .user-info {
    margin-top: 18rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .user-name {
      font-size: 32rpx;
      color: #222;
      font-weight: 500;
      margin-bottom: 6rpx;
    }
    .user-role {
      font-size: 24rpx;
      color: #888;
    }
  }
}
.simple-card {
  background: #fff;
  border-radius: 12rpx;
  margin: 0 16rpx 16rpx 16rpx;
  box-shadow: none;
  padding: 0;
  ::v-deep .u-cell {
    font-size: 28rpx;
    padding: 0 24rpx;
    min-height: 80rpx;
    align-items: center;
    .u-cell__icon {
      margin-right: 18rpx;
    }
    .u-cell__title {
      font-weight: 400;
    }
  }
  ::v-deep .u-cell-group {
    border-radius: 8rpx;
    overflow: hidden;
    margin-bottom: 0;
  }
}
</style> 